import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { UnifiedMapComponent, ViewRange, UnifiedMapMode } from 'unified-map';
import { MapUiService } from '../one-map/map-ui.service';
import { DisplayService } from './display.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ComponentType } from '@angular/cdk/portal';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.scss']
})
export class DisplayComponent implements OnInit {
  @ViewChild("map", { static: true }) unifiedMap: UnifiedMapComponent;
  @ViewChild('sidePane', { read: ViewContainerRef, static: true }) contentRef;
  private unsubscribe: Subject<any> = new Subject();

  viewRange: ViewRange = [
    [98.73, 33.20],
    [110.67, 40.68]
  ];
  type: string = 'river';
  title: string = '';
  bottomGap: number = 10;
  rotate: boolean = false;

  constructor(private mapUiService: MapUiService, private dispService: DisplayService, private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
    this.dispService.mainView = this;
    this.dispService.typeChange.subscribe(type => {
      this.type = type;
      switch (this.type) {
        case 'river':
          this.title = '水情形势';
          this.bottomGap = 200;
          break;
        case 'ningxia':
          this.title = '宁夏水资源取用水情势';
          this.bottomGap = 10;
          break;
        case 'ira':
          this.title = '引黄灌区灌溉进展';
          this.bottomGap = 200;
          break;
      }
      this.initMap();
    });
    // this.regSidePaneChange();
  }

  initMap() {
    this.mapUiService.getMapInstance().then(() => {
      this.mapUiService.hideAllLayer();
      if (this.type == 'ira') {
        this.mapUiService.addVectorLayer({
          type: 'polygon',
          layerName: 'view_guanyu',
          visible: true,
          style: {
            fill: '',
            fillOpacity: 0.6,
            outlineWidth: 0
          },
          label: {
            text: "",
            weight: "bold",
            size: 13,
            fill: "#88abda",
            outline: "#ffffff",
            outlineWidth: 2,
            pixelOffset: [0, 12]
          },
          zIndex: 2
        });
        this.rotate = true;
        setTimeout(() => {
          this.mapUiService.rotateView(true);
        }, 1200);
      } else {
        this.mapUiService.addVectorLayer({
          initView: this.type == 'river',
          type: "polyline",
          layerName: "huanghe0429",
          style: {
            fill: '#56E8F2',
            fillOpacity: 1,
            outline: '#56E8F2',
            outlineWidth: 1,
            lineWidth: this.type == 'river' ? 8 : 6
          },
          visible: true
        });
        this.mapUiService.addVectorLayer({
          initView: this.type == 'ningxia',
          type: "polygon",
          layerName: "boundary",
          url: "assets/boundary.geojson",
          style: {
            fill: "#000000",
            fillOpacity: 0.3
          },
          visible: true
        });
        if (this.rotate) {
          this.rotate = false;
          setTimeout(() => {
            this.mapUiService.rotateView(false);
          }, 600);
        }
      }
    });
  }

  regSidePaneChange(): void {
    this.dispService.sidePaneChange.pipe(
      takeUntil(this.unsubscribe)
    ).subscribe((res: any) => {
      if (res.component === null) {
        this.dispService.closeSidePane();
        this.dispService.currentSidePaneComp = null;
        setTimeout(() => this.unifiedMap.hasSidePane = false, 1);
        return;
      }
      this.unifiedMap.hasSidePane = true;
      this.loadComponent(res.component, res.data);
      if (res.defaultOpen) {
        this.dispService.openSidePane();
      } else {
        this.dispService.closeSidePane();
      }
    });
  }

  loadComponent<T>(contentComp: ComponentType<T>, data: any): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(contentComp);
    this.contentRef.clear();
    const contentComponentRef = this.contentRef.createComponent(componentFactory);
    contentComponentRef.instance.data = data;
    this.dispService.currentSidePaneComp = contentComponentRef.instance;
    this.unifiedMap.hasSidePane = true;
  }

  mapInitialized(initMode: UnifiedMapMode): void {
    this.dispService.mapInitialized.next(initMode);
  }

  entityClick(event: any): void {
    this.dispService.entityClicked.next(event);
  }

  entityHovered(event: any): void {
    this.dispService.entityHovered.next(event);
  }
}
